<template>
  <div class="sort cursor">
    <div :class="sortcss == 'sort' ? 'slider huakuai' : 'slider'" @click="sortFn('sort')">
      Ascending
    </div>
    <div :class="sortcss == '-sort' ? 'slider huakuai' : 'slider'" @click="sortFn('-sort')">
      Reverse order
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sortcss: "sort",
    };
  },
  methods: {
    //   点击改变样式
    sortFn(index) {
      if (this.sortcss == index) {
        return;
      }
      this.$emit('sortFn',index)
      this.sortcss = index;
    },
  },
};
</script>
 
<style lang = "less" scoped>
.sort {
  width: 228px;
  height: 31px;
  background: #f0f0f0;
  border-radius: 18px;
  display: flex;
  font-size: 13px;
  color: #666666;
  .slider {
    width: 114px;
    height: 31px;
    width: 50%;
    text-align: center;
    line-height: 31px;
    border-radius: 18px;
  }
  .huakuai {
    background: #5486e5;
    color: #fff;
  }
}
</style>